<template>
	<!-- paysucceed支付成功 -->
	<view class="p_wp">
		<image class="succeed_image" src="../../static/imgs/succeed.png" mode=""></image>
		<view class="li4">收款成功(手动核销)</view>
		<view class="li4 li5">{{info.price}}元</view>
		<view v-if="info.paymode == 0" class="li2">
			<text>多米街卡内余额</text>
			<text style="color: #f03201; font-size: 28upx;font-weight: bold;">{{info.usemoney}}</text>
			<text>元</text>
		</view>
		<view class="li2">核销时间 {{info.checktime}}</view>
		<view v-if="info.paymode == 0" class="li7">
			<text style="color: #777;">【尊敬的收银员】</text>
			<text style="color: #777;">请扣除多米街平台</text>
			<text style="color: #777;">在您店内会员卡的余额！</text>
			<text>多米街会员卡绑定手机号为</text>
			<text class="phone">{{info.mobile}} </text>
			<text style="font-size: 38upx;">扣除</text>
			<text style="font-size: 38upx;color: #f03201;">{{info.price}}</text>
			<text style="font-size: 38upx;">元</text>
		</view>
		<view class="go_home" @click="$navTo('/pages/business/collectionrecord')"><text>查看核销明细</text></view>
		<view class="go_home" @click="$navTo('/pages/index/index')"><text>返回首页</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderid: '',
				info: {
					price: '',
					usemoney: '',
					checktime: '',
					mobile: '',
					paymode:-1,
				},
			}
		},
		onLoad(option) {
			if (option.scene) {
				this.orderid = option.scene;
			} else if (option.q) {
				let scan_url = decodeURIComponent(option.q);
				this.orderid = this.gup('orderid', scan_url);
			} else {
				this.orderid = option.orderid;
			}
			this.getInfo();
		},
		methods: {
			gup(name, url) {
				if (!url) url = location.href;
				name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
				var regexS = "[\\?&]" + name + "=([^&#]*)";
				var regex = new RegExp(regexS);
				var results = regex.exec(url);
				return results == null ? null : results[1];
			},
			getInfo() {
				this.$axios('checkorder/checked', 'POST', 'supplier', {
					orderid: this.orderid
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		color: $font-color-base;
		padding-bottom: 100upx;
	}

	.succeed_image {
		display: block;
		margin: 0 auto;
		height: 280upx *0.8;
		width: 340upx*0.8;
	}

	.li,
	.li2,
	.li3,
	.li4,
	.li6 {
		text-align: center;
		line-height: 50upx;

		text {
			display: inline-block;
			width: 50%;
			font-size: 34upx;
			
		}

		text:nth-of-type(1) {
			text-align: right;
		}

		text:nth-of-type(2) {
			text-align: left;
		}
	}

	.li4 {
		font-weight: bold;
		font-size: 42upx;
		line-height: 70upx;
	}

	.li5 {
		color: #000;
		font-size: 42upx;
		letter-spacing: 2px;
		transform: scaleY(1.3);
	}

	.li6 {
		color: #000;

		text {
			width: auto;
		}
	}

	.li7 {
		padding-top: 40upx;
		color: rgb(16, 52, 235);
		text-align: center;
		font-size: 32upx;
		
		text {
			display: block;
			margin: 10upx 0upx;
		}

		.phone {
			color: red;
			font-size: 38upx;
		}
	}

	.li2 {
		padding-bottom: 20upx;
	}

	.li3 text {
		color: $base-color;
	}

	.go_home {
		text-align: center;
		padding-top: 20upx;
		margin-left: 20upx;

		text {
			border: 1px $base-color solid;
			border-radius: 8upx;
			color: $base-color;
			display: inline-block;
			letter-spacing: 1px;
			line-height: 55upx;
			padding: 0 20upx;
		}
	}
</style>